<!-- 运势标签 -->
<template>
  <div id="tag" class="" :style="positionStyle" v-on:click="handleClick()">
    <!-- 标签名字 -->
    <div id="name">
      <span :style="nameStyle">{{ this.name }}</span>
    </div>
    <!-- 伸长的动画 -->
    <transition name="stretch">
      <!-- 运势条区域 -->
      <div v-if="showLevel" class="horizontal-center" :style="levelStyle">
        <!-- 进度条(运势条) -->
        <div id="progress" class="vertical-center" :style="progressStyle">
          <span :style="tipStyle">{{ numToZh(this.level) }}</span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Tag',
  props: {
    // 标签序号 用来安排位置
    seq: Number,
    // 运势的标签名
    // 标签名决定其在父类中的位置
    name: String,
    // 运势等级
    level: Number,
    // 运势
    yunshi: Object,
  },
  components: {},
  data: function() {
    return {
      // 运势区域动画是否激活
      showLevel: false,

      // 运势等级区域块样式
      levelStyle: {
        height: '',
      },
      // 组件位置
      positionStyle: {
        // 起始顶部间距
        marginTop: '20%',
        // 根据序号定位
        // 10(%) 两边间距
        // 10(%) Tag本身宽度 (有6个)
        // 4(%) Tag间距离 (有5个)
        marginLeft: 10 + (parseInt(this.seq) - 1) * 14 + '%',
      },
      // 标签名样式
      nameStyle: {
        // 根据运势等级给出不同的颜色提醒用户
        color: '',
      },
      // 进度条(运势条)样式
      progressStyle: {
        // 运势条占区域的宽度
        width: '60%',
        // 顶部间隔
        marginTop: '10%',
        // 透明度
        opacity: '0.5',
        // 进度条(运势条)颜色
        backgroundColor: '',
        // 运势条(运势条)长度
        // 10(%) 每升高一级增长的长度
        height: this.level * 10 + '%',
      },
      // 运势等级提示数字的样式
      tipStyle: {
        // 数字的颜色
        color: '',
      },
    }
  },
  created: function() {
    setTimeout(
      function() {
        this.init()
      }.bind(this),
      10
    )
  },

  methods: {
    /**
     * Async Init
     * 数据初始化
     *
     * @return void
     */
    async init() {
      this.nameStyleBuild()
      this.showLevel = true
      this.progressStyleBuild()
      this.tipStyleBuild()
      // 重新加载动态样式覆盖静态样式
      // 修正因为静态和动态样式冲突而丢失的高度
      setTimeout(
        function() {
          this.levelStyle.height = '90%'
        }.bind(this),
        2010
      )
    },

    /**
     * NameStyleBuild
     * 标签名字动态样式构建
     *
     * @return void
     */
    nameStyleBuild() {
      // 根据运势等级给出不同的颜色提醒用户
      if (this.level > 7) {
        this.nameStyle.color = 'dodgerblue'
        return
      }
      if (this.level > 5) {
        this.nameStyle.color = 'green'
        return
      }
      if (this.level > 3) {
        this.nameStyle.color = 'darkorange'
        return
      }
      this.nameStyle.color = 'darkred'
      return
    },

    /**
     * ProgressStyleBuild
     * 进度条动态样式构建
     *
     * @return void
     */
    progressStyleBuild() {
      // 根据运势等级给出不同的颜色提醒用户
      if (this.level > 7) {
        this.progressStyle.backgroundColor = 'dodgerblue'
        return
      }
      if (this.level > 5) {
        this.progressStyle.backgroundColor = 'green'
        return
      }
      if (this.level > 3) {
        this.progressStyle.backgroundColor = 'orange'
        return
      }
      this.progressStyle.backgroundColor = 'red'
      return
    },

    /**
     * TipStyleBuild
     * 提示数字样式构建
     *
     * @return void
     */
    tipStyleBuild() {
      // 根据运势等级给出不同的颜色提醒用户
      if (this.level > 7) {
        this.tipStyle.color = 'lightblue'
        return
      }
      if (this.level > 5) {
        this.tipStyle.color = 'lightgreen'
        return
      }
      if (this.level > 3) {
        this.tipStyle.color = 'lightyellow'
        return
      }
      this.tipStyle.color = 'antiquewhite'
      return
    },

    /**
     * NumToZh
     * 阿拉伯数字转中文数字
     *
     * @param Number num 待转的阿拉伯数字
     *
     * @return String
     */
    numToZh(num) {
      switch (parseInt(num)) {
        case 2:
          return '二'
        case 3:
          return '三'
        case 4:
          return '四'
        case 5:
          return '五'
        case 6:
          return '六'
        case 7:
          return '七'
        case 8:
          return '八'
        case 9:
          return '九'
        default:
      }
    },

    /**
     * HandleClick
     * 点击事件
     *
     * @param  <+Comment+>
     *
     * @return <+Return+>
     */
    handleClick() {
      this.$parent.yunshiBuild(this.name, this.yunshi)
    },
  },
}
</script>

<style scoped media="screen" lang="less">
/* 效果类 */
/* 长度伸长 */
.stretch-enter {
  height: 0%;
}
.stretch-leave-to,
.stretch-enter-to {
  height: 90%;
}
.stretch-leave,
.stretch-enter-active {
  transition: all 2s;
}
.stretch-leave-active,

// 容器属性
/* 水平居中 */
.horizontal-center {
  display: flex;
  justify-content: center;
}
/* 垂直居中 */
.vertical-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

/* 标签静态样式 */
#tag {
  position: absolute;
  width: 10%;
  height: 30%;
  /* 标签名静态样式 */
  #name {
    width: 100%;
    height: 10%;
  }
  /* 运势等级静态样式 */
  #level {
    width: 100%;
  }
}
</style>
